<template>
  <div class="order">
    <div class="box">
    <div class="order_top">
      <div class="p1">
        <input class="ding" v-model="search" placeholder="订单号"/>
        <img  src="../assets/images/search.png"/>
      </div>
      <!-- 订单状态 -->
      <div class="p2">
        <el-select v-model="value" placeholder="订单状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 付款状态 -->
      <div class="p3">
        <el-select v-model="values" placeholder="付款状态">
          <el-option
            v-for="item in optionsf"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 开始日期 -->
      <div class="p4">
        <div class="block">
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="下单日期">
          </el-date-picker>
        </div>
      </div>
      <!-- 结束日期 -->
      <div class="p5">
        <div class="block">
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="截止日期"
            :picker-options="endDateOpt">

          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 订单列表 -->
    <div class="list" >
      <table>
        <tr >
          <td>单号</td>
          <td>数量</td>
          <td>收货人</td>
          <td>订单状态</td>
          <td>付款状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item, index) in list" :key="index" else>
          <td >{{item.number }}<br/>{{time | formatDate}}</td>
          <td >{{item.amount}}</td>
          <td >{{item.name}}<br/>{{item.tel}}</td>
          <td >{{item.states}}</td>
          <td >{{item.pay}}</td>
          <td ><router-link to="/av">{{item.handle}}</router-link><br/><span @click="del(index)" style="cursor: pointer">{{item.cancel}}</span></td>
        </tr>
        <tr v-show="this.list.length === 0 " style="width:100%; height:1rem; position:absolute;top:1.5rem;">暂无数据，请搜索其他关键词吧...</tr>
      </table>
    </div>
    <!-- 分页 -->
    <div class="page" v-show="this.list.length !== 0 ">
      <div class="page-bar">
        <ul>
          <li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
          <li v-if="cur==1"><a class="banclick">上一页</a></li>
          <li v-for="(index, value) in indexs" :key="value"  :class="{ 'active': cur == index}">
            <a @click="btnClick(index)">{{ index }}</a>
          </li>
          <li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
          <li v-if="cur == all"><a class="banclick">下一页</a></li>
          <li><a>共<i>{{all}}</i>页记录</a></li>
        </ul>
      </div>
    </div>
  </div>
    <div class="footer">
      <ul>
        <li><router-link to="/" >关于我们</router-link></li>
        <li><router-link to="/shopp">联系我们</router-link></li>
        <li><router-link to="/order">会员介绍</router-link></li>
        <li><router-link to="/order">购物指南</router-link></li>
        <li><router-link to="/order">常见问题</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {formatDate} from '../filters'
export default {
  data () {
    return {
      search: '',
      time: null,
      show: false,
      indent: '订单状态',
      options: [
        {
          value: '选项1',
          label: '全部'
        },
        {
          value: '选项2',
          label: '待确定'
        },
        {
          value: '选项3',
          label: '生产中，待出库'
        },
        {
          value: '选项4',
          label: '已出库，待收货'
        },
        {
          value: '选项5',
          label: '已收货'
        },
        {
          value: '选项6',
          label: '已取消'
        }
      ],
      value: '',
      optionsf: [
        {
          value: '1',
          label: '全部'
        },
        {
          value: '2',
          label: '待付款'
        },
        {
          value: '3',
          label: '已付款'
        }
      ],
      values: '',
      startDate: '',
      endDate: '',
      endDateOpt: {
        disabledDate: (time) => {
          return time.getTime() < this.startDate
        }
      },
      tableData: [
        {
          number: 'dh15454',
          amount: '200',
          name: '雷义',
          tel: '18754893256',
          states: '待确定',
          pay: '待付款',
          handle: '查看详情',
          cancel: '取消订单'
        },
        {
          number: 'mb15445',
          amount: '202',
          name: '王峰',
          tel: '15678452359',
          states: '已出库，待收货',
          pay: '以付款',
          handle: '查看详情',
          cancel: '取消订单'
        }
      ],
      all: 20, // <!--总页数-->
      cur: 1 // <!--当前页码-->
    }
  },
  filters: {
    // <!--时间戳-->
    formatDate () {
      var date = new Date()
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  computed: {
    // <!-- 查询-->
    list () {
      var _this = this
      var list = []
      this.tableData.map(function (item) {
        if (item.number.search(_this.search) !== -1) {
          list.push(item)
        }
      })
      return list
    },
    // <!--分页-->
    indexs: function () {
      var left = 1
      var right = this.all
      var ar = []
      if (this.all >= 5) {
        if (this.cur > 3 && this.cur < this.all - 2) {
          left = this.cur - 2
          right = this.cur + 2
        } else {
          if (this.cur <= 3) {
            left = 1
            right = 5
          } else {
            right = this.all
            left = this.all - 4
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  },
  watch: {
    cur: function (oldValue, newValue) {
      console.log(arguments)
    }
  },
  mounted () {
  },
  methods: {
    // <!--删除列表-->
    del: function (index) {
      this.$confirm('确定要删除吗？', '提示', {
        //  this.tableData.splice(index, 1)
      })
      // this.tableData.splice(index, 1)
    },
    // <!--页码点击事件-->
    btnClick: function (data) {
      if (data !== this.cur) {
        this.cur = data
      }
    },
    pageClick: function () {
      console.log('现在在' + this.cur + '页')
    }
  }
}
</script>

<style scoped lang="less">
*{
  margin: 0;
  padding:0;
  box-sizing:border-box;
}
.box{
  // width:100%;
  // min-width: 7rem;
  // position: relative;
  // background: red
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.order{
  position: relative;
  top:1.5rem;
  .order_top{
    width:82%;
    height:1rem;
    margin:0 auto;
    // background: pink;
    .p1{
      .ding{
        width:16%;
        height:.5rem;
        border-radius: .1rem;
        border:1px solid lightgray;
        outline: 0;
        padding: 0 0 0 .2rem;
        font-size: .2rem;
        position: absolute;
        left:9%;
        top:.4rem;
      }
      img{
        width:.25rem;
        height:.25rem;
        position: absolute;
        left:21%;
        top:.55rem;
      }
    }
    .p2{
      width:18%;
      height:.5rem;
      position: relative;
      left:22%;
      top:.4rem;
      border-radius: .1rem;
      line-height: .5rem;
      background: white;
      font-size: .2rem;
    }
    .p3{
      width:18%;
      height:.5rem;
      position: relative;
      left:42%;
      top:-.1rem;
      border-radius: .1rem;
      line-height: .5rem;
      background: white;
      font-size: .2rem;
    }
    .p4{
      width:18%;
      height:.5rem;
      position: relative;
      left:62%;
      top:-.6rem;
      border-radius: .1rem;
      line-height: .5rem;
      background: white;
      font-size: .2rem;
    }
     .p5{
      width:18%;
      height:.5rem;
      position: relative;
      left:81%;
      top:-1.1rem;
      border-radius: .1rem;
      line-height: .5rem;
      background: white;
      font-size: .2rem;
    }
  }
   .list{
      position: relative;
      top:.3rem;
      width:82%;
      min-height:2rem;
      margin:0 auto;
      // background: red;
      font-size: .2rem;
      td{
        width:7%;
        height:.6rem;
        text-align: left;
        font-size: .18rem;
        // background: teal;
        a{
          text-decoration:none
        }
      }
    }
    .page{
      width:82%;
      height:1rem;
      position: relative;
      top:.7rem;
      margin:0 auto;
      // background: pink
    }
    .page-bar{
      width:100%;
      height:1rem;
      margin:0 auto;
      font-size: .2rem;
    }
    ul, li{
      margin: 0px;
      padding: 0px;
    }
    li{
      list-style: none
    }
    .page-bar li:first-child>a {
      margin-left:20%;
      border-radius: .1rem;

    }
    .page-bar a{
      border: 1px solid rgb(107, 36, 102);
      text-decoration: none;
      position: relative;
      left:5%;
      float: left;
      border-radius: .1rem;
      padding: 6px 12px;
      margin:0 .05rem 0 .05rem;
      margin-left: -1px;
      line-height: 1.42857143;
      color: rgb(107, 36, 102);
      cursor: pointer
    }
    .page-bar a:hover{
        background-color: #eee;
    }
    .page-bar a.banclick{
        cursor:not-allowed;
    }
    .page-bar .active a{
        color: #fff;
        cursor: default;
        background-color: rgb(107, 36, 102);
        // border-color: #337ab7;
    }
    .page-bar i{
        font-style:normal;
        color: #d44950;
        margin: 0px 4px;
        font-size: 12px;
    }
}
.footer{
    width:100%;
    height:.6rem;
    font-size: .2rem;
    position: relative;
    top:2.3rem;
    // background: green;
    border-top:1px solid lightgray;
    li{
      width:20%;
      height:.6rem;
      line-height: .6rem;
      float:left;
      list-style: none;
      color: #6e769a;
      a{
        text-decoration: none;
        color: black;

      }
    }
  }
</style>
